<template>

  <div class="credit-view">

    <item-title title="进销存" />

    <div class="table-view">
      <div style="background-color: rgba(230,162,60,0.2);height: 25px;width: 100%;display: flex;align-items: center;margin-bottom: 20px">
        <el-icon
          color="#E6A23C"
          style="margin: 0 10px"
        >
          <info-filled />
        </el-icon>
        <span>进销存数据为实时数据,本月发货量不含此订单未发货数量</span>
      </div>

      <el-table
        :data="datas.list"
        max-height="500"
        border
      >
        <el-table-column type="index" />
        <el-table-column
          align="left"
          header-align="center"
          prop="productPopularName"
          label="产品通用名"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div>
              {{ scope.row.productInfoDetail?.productPopularName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="productInfoDetail.productName"
          label="商品名"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          align="center"
          width="100"
          prop="productInfoDetail.packSpecs"
          label="包装规格"
          show-overflow-tooltip
        />
        <el-table-column
                align="center"
                width="100"
                prop="productInfoDetail.producer"
                label="生产厂家"
                show-overflow-tooltip
        />
        <el-table-column
          align="center"
          width="100"
          prop="stock"
          label="上月结余库存"
        >
          <template #default="scope">
            <span v-if="scope.row.productInfoDetail">{{ scope.row.stock }}{{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          prop="thisMonthDeliveryAmount"
          label="本月发货量"
        >
          <template #default="scope">
            <span v-if="scope.row.productInfoDetail">{{ scope.row.thisMonthDeliveryAmount }}{{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="本月配送量"
        >
          <template #default="scope">
            <span v-if="scope.row.productInfoDetail">{{ scope.row.thisMonthDistributeAmount }}{{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="当前库存"
        >
          <template #default="scope">
            <span v-if="scope.row.productInfoDetail">{{ scope.row.currentStock }}{{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          label="允许库存最大数量"
        >
          <template #default="scope">
            <div>
              <span v-if="scope.row.capacity ===0">不限</span>
              <span v-else>{{ scope.row.capacity }}{{ getLabel('sell_unit',scope.row.productInfoDetail?.sellUnit) }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <item-title title="应收统计" />

    <div>

      <div style="background-color: rgba(230,162,60,0.2);height: 25px;width: 100%;display: flex;align-items: center;margin-bottom: 10px">
        <el-icon
          color="#E6A23C"
          style="margin: 0 10px"
        >
          <info-filled />
        </el-icon>
        <span>应收统计为实时数据</span>
      </div>

      <el-form>

        <el-row>

          <el-col :span="24">
            <el-form-item label="应收最大额度">
              <span class="specialColor">{{ statistical.quota }}元</span>
            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="当前累计应收">
              <span class="specialColor">{{ statistical.sumSellAmount -  statistical.sumReturnAmount}}元</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">

            <el-form-item label="累计销售额">
              <span class="specialColor">{{ statistical.sumSellAmount }}元</span>
            </el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="累计回款金额">
              <span class="specialColor">{{ statistical.sumReturnAmount }}元</span>
            </el-form-item>

          </el-col>

        </el-row>

      </el-form>

    </div>

  </div>

</template>

<script>
import {InfoFilled} from '@element-plus/icons'
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'CreditView',
  components: { InfoFilled },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    statistical: {
      type: Object,
      default: {},
    },
  },
  setup() {},
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.credit-view {
  .table-view {
    padding-bottom: $page-y;
  }
  .specialColor {
    color: $assist-color;
  }
}
</style>
